<template>
  <div ref="dom" class="charts chart-line"></div>
</template>

<script>
import echarts from 'echarts'
import tdTheme from './theme.json'
echarts.registerTheme('tdTheme', tdTheme)
export default {
  name: 'ChartRing',
  props: {
    text: String,
    ringData: Number
  },
  watch: {
    'liquidFillData':function(newVal,oldVal){
      console.log(newVal)
      this.changeChart()
    }
  },
  mounted () {
    this.changeChart()
  },
  methods:{
    changeChart(){
      this.$nextTick(() => {
        let option = {
          title: {
            text: this.text,
            subtext: this.subtext,
            x: 'center'
          },
          tooltip: {
            formatter: this.text + ': {c}°'
          },
          toolbox: {
            show: true,
            feature: {
              mark: {show: true},
              dataView: {show: true, readOnly: false},
              restore: {show: false},
              saveAsImage: {show: false}
            }
          },
          series: [
            {
              name: '当前数据值',
              type: 'gauge',
              center: ['50%', '55%'], // 默认全局居中
              detail: {
                formatter: function (v) {
                  if (v < 22.5) {
                    return '北'
                  } else if (v < 67.5) {
                    return '东北'
                  } else if (v < 112.5) {
                    return '东'
                  } else if (v < 157.5) {
                    return '东南'
                  } else if (v < 202.5) {
                    return '南'
                  } else if (v < 247.5) {
                    return '西南'
                  } else if (v < 292.5) {
                    return '西'
                  } else if (v < 337.5) {
                    return '西北'
                  } else if (v < 360) {
                    return '北'
                  }
                },
                offsetCenter: ['0', '45%'],
                textStyle: {
                  fontSize: 24
                }
              },
              data: [{value: this.ringData, name: ''}],
              startAngle: 90,
              endAngle: -269.9,
              min: 0, // 最小值
              max: 360, // 最大值
              splitNumber: 8, // 分割段数，默认为5
              axisLine: { // 坐标轴线
                show: true, // 默认显示，属性show控制显示与否
                lineStyle: { // 属性lineStyle控制线条样式
                  color: [[0.2, 'orange'], [0.4, 'orange'], [0.8, 'orange'], [1, 'orange']],
                  width: 15
                }
              },
              axisTick: {
                show: false
              },
              axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
                show: true,
                textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                  color: '#333'
                }
              },
              splitLine: { // 分隔线
                show: true, // 默认显示，属性show控制显示与否
                length: 15, // 属性length控制线长
                lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
                  color: '#eee',
                  width: 2,
                  type: 'solid'
                }
              },
              pointer: {
                length: '60%',
                color: 'auto'
              }
            }
          ]
        }
        let dom = echarts.init(this.$refs.dom, 'tdTheme')
        dom.setOption(option)
      })
    }
  }
}
</script>

<style lang="less">

</style>
